<template>
  <!--采购明细-->
  <div class="pur">
    <!--采购明细查找-->
    <el-row>
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="filterValue" @change="initData(currPage,pageSize,filterValue,content)" placeholder="全部数据" style="width: 120px">
        <el-option v-for="group in filterOptions" :key="group.value"
                   :label="group.label" :value="group">
        </el-option>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" clearable placeholder="请输入内容" style="width: 150px"></el-input>
      <el-select v-model="vagueValue" placeholder="主题" style="width: 120px">
        <el-option v-for="group in vagueOptions" :key="group.value"
                   :label="group.label" :value="group.value">
        </el-option>
      </el-select>
      <el-button @click="initData(currPage,pageSize,filterValue,content)" icon="el-icon-search" size="small" circle></el-button>
    </el-row>
    <!--采购明细-->
    <div style="margin-top: 15px;overflow: hidden;">
      <el-col :span="12" class="m-b-10">
        <span>采购明细</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <!--采购明细dialog-->
      <el-dialog title="采购明细" :visible.sync="dialogFormVisible" width="60%" style="color: #333333"  >
        <el-form :model="purDetails" label-width="100px">
          <el-divider><span class="font-14-bold"></span></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经手人:">
                <div class="border-bo-s">{{purDetails.purchaseByPurchaseId.employeeByEmpId.empName}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购单:">
                <div class="border-bo-s">
                  {{purDetails.purchaseByPurchaseId.purchaseTheme}}
                  <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
                    <router-link :to="{path:'/purchaseview',query: {purId: purDetails.purchaseByPurchaseId.purchaseId}}">
                      <span style="color: #333333"><i class="el-icon-s-cooperation"></i></span>
                    </router-link>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="产品名称:">
                <div class="border-bo-m">
                  {{purDetails.productByProductId.productName}}
                  <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
                    <router-link :to="{path:'/productview',query: {productId: purDetails.productByProductId.productId}}">
                      <span style="color: #333333"><i class="el-icon-s-cooperation"></i></span>
                    </router-link>
                  </el-tooltip>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单价:">
                <div class="border-bo-s">￥{{purDetails.productDetailPrice}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金额:">
                <div class="border-bo-s">￥{{purDetails.productDetailMoney}}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="数量:">
                <div class="border-bo-s">{{purDetails.productDetailCount}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="已入库:">
                <div class="border-bo-s">{{purDetails.productDetailIntoNum}}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="备注:">
                <div class="border-bo-m">{{purDetails.productDetailRemarks}}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
    <!--方案表格-->
    <el-table ref="multipleTable" :data="purDetailsList" tooltip-effect="dark" id="outTable"
              style="width: 100%" border :header-cell-style="rowClass">
      <el-table-column prop="productDetailId" label="ID" sortable width="60"></el-table-column>
      <el-table-column prop="purchaseByPurchaseId.employeeByEmpId.empName" label="经手人">
      </el-table-column>
      <el-table-column label="对应采购单">
        <template slot-scope="scope">
          <span>{{scope.row.purchaseByPurchaseId.purchaseTheme}}</span>
          <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
            <router-link :to="{path:'/purchaseview',query: {purId: scope.row.purchaseByPurchaseId.purchaseId}}">
                <span style="color: #333333">
                  <i class="el-icon-s-cooperation"></i>
                </span>
            </router-link>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="对应供应商">
        <template slot-scope="scope">
          <span>{{scope.row.purchaseByPurchaseId.customerByCustomerId.customerName}}</span>
          <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
            <router-link :to="{path:'/customerview',query: {customerId: scope.row.purchaseByPurchaseId.customerByCustomerId.customerId}}">
                <span style="color: #333333">
                  <i class="el-icon-s-cooperation"></i>
                </span>
            </router-link>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" >
        <template slot-scope="scope">
          <span>{{scope.row.productByProductId.productName}}</span>
          <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
            <router-link :to="{path:'/productview',query: {productId: scope.row.productByProductId.productId}}">
              <span style="color: #333333"><i class="el-icon-s-cooperation"></i></span>
            </router-link>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="productDetailPrice" label="单价" sortable width="120">
        <template slot-scope="scope">
          <span>￥{{scope.row.productDetailPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="productDetailCount" label="数量" sortable width="100"></el-table-column>
      <el-table-column prop="productDetailIntoNum" label="入库量" sortable width="100"></el-table-column>
      <el-table-column prop="productDetailMoney" label="金额" sortable  width="120">
        <template slot-scope="scope">
          <span>￥{{scope.row.productDetailMoney}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130">
        <template slot-scope="scope">
          <div>
            <el-tooltip class="item" effect="dark" content="查看详情" placement="bottom">
              <el-button size="mini" @click="handleEdit(scope.row) "
                         icon="el-icon-s-ticket" type="primary" circle style="margin-left: 10px"></el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :offset="8" :span="14">
        <el-pagination layout="sizes,prev,pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" :page-sizes="pageSizes" @size-change="changeSize"></el-pagination>
      </el-col>
      <el-col :span="2">
        <el-tooltip class="item" effect="dark" content="打印列表" placement="bottom">
          <el-button @click="handleWindowPrint('#outTable', '列表打印')" style="padding: 12px 12px" type="info" plain  icon="el-icon-printer"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出Excel格式数据" placement="bottom">
          <el-button @click="exportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-remove"></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {formatTimeToStr} from "../assets/format";
  import XLSX from "xlsx";
  import FileSaver from "file-saver";
  export default {
    data () {
      return {
        dialogFormVisible:false,
        emp:{},
        purDetailsList: [], // 采购明细集合
        pageSize: 10, // 分页页大小
        pageSizes:[10,20,30],//页大小数组
        currPage: 1, // 当前页码，默认为1
        totalSize: 0, // 总记录数
        purDetails: {
          productDetailId: 0,
          productDetailRemarks: '',
          productDetailModel: '',
          productDetailCount: '',
          productDetailPrice: '',
          productDetailIntoNum: '',
          productDetailOutNum: '',
          productDetailMoney: '',
          productByProductId:'',
          purchaseByPurchaseId: {
            employeeByEmpId:{}
          }
        },
        content: '',// input内容
        filterOptions: [{
          value: 0,
          label: '全部数据',
          num:0
        },{
          value: 1,
          label: '未完全入库',
          num:0
        }, {
          value: 2,
          label: '审批:待申请',
          num:0
        },{
          value: 3,
          label: '审批:同意',
          num:2
        }, {
          value: 4,
          label: '审批:否决',
          num:3
        },{
          value: 5,
          label: '审批:待审批',
          num:1
        }],
        filterValue: {value: 0, label: '全部数据', num:0},
        vagueOptions: [{
          value: 1,
          label: '产品名称'
        }],
        vagueValue: 1,
      }
    },
    methods: {
      // 查询当前员工
      loginEmp() {
        this.$axios.get('http://localhost:8088/emp')
          .then(v => {
            this.emp = v.data
          })
          .catch(function (v) {
          })
      },
      // 分页查询所有
      initData(currPage, pageSize,filter,proName) {
        this.$axios.get('http://localhost:8088/pur-detail-all-list', {
          params: {
            page: currPage,
            size: pageSize,
            value:filter.value,
            num:filter.num,
            proName:proName
          }
        })
          .then(v => {
            this.purDetailsList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {
          })
      },
      // 入库表格分页
      changePage(val) {
        this.initData(val, this.pageSize,this.filterValue,this.content)
      },
      //改变页大小
      changeSize(val){
        this.pageSize = val
        this.currPage = 1
        this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
      },
      // 修改数据回显
      handleEdit(val) {
        this.dialogFormVisible = true
        this.purDetails.productDetailId = val.productDetailId
        this.purDetails.productDetailRemarks = val.productDetailRemarks
        this.purDetails.productDetailModel = val.productDetailModel
        this.purDetails.productDetailCount = val.productDetailCount
        this.purDetails.productDetailIntoNum = val.productDetailIntoNum
        this.purDetails.productDetailOutNum = val.productDetailOutNum
        this.purDetails.productDetailPrice = val.productDetailPrice
        this.purDetails.productDetailMoney = val.productDetailMoney
        this.purDetails.productByProductId = val.productByProductId
        this.purDetails.purchaseByPurchaseId = val.purchaseByPurchaseId
      },
      // 点击编辑详单跳转到报价视图
      openSto(stoId) {
        if (this.storage.storageStatus === 2){
          this.$message({
            message: '该入库单已入库，不可编辑明细',
            type: 'warning'
          });
        }else {
          this.$router.push({path: '/storageview', query: {stoId: stoId}});
        }
      },
      // pdf打印
      handleWindowPrint (ele, fileName) {
        // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
        document.head.innerHTML = '<meta charset="utf-8">\n' +
          ' <title> ' + fileName + '</title>\n' +
          ' <meta name="format-detection" content="telephone=no">\n' +
          ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
          ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
          ' <link rel="stylesheet" href="./static/css/contract.css"/>'
        document.body.innerHTML = document.querySelector(ele).outerHTML
        // 转异步 等待dom元素渲染（样式）完毕在打印
        setTimeout(() => {
          // 打印
          window.print()
          // 刷新页面
          window.location.reload()
        }, 20)
      },
      //导出excel
      exportExcel () {
        var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
        var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
            "采购导出.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },
      // 表头靠左样式
      rowClass(){
        return "text-align:left"
      }
    },
    created() {
      this.loginEmp()
      this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
    },
    filters: {
      formatDate: function(time) {
        if(time!=null&&time!="")
        {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
        }else{
          return "";
        }
      },
      formatDateJudge: function(time) {
        if(time != null && time != "")
        {
          let date = new Date(time);
          let currentDate = new Date()
          let seperator1 = "-";
          let month = currentDate.getMonth() + 1<10? "0"+(currentDate.getMonth() + 1):currentDate.getMonth() + 1;
          let strDate = currentDate.getDate()<10? "0" + currentDate.getDate():currentDate.getDate();
          let today = currentDate.getFullYear() + seperator1  + month  + seperator1  + strDate
          let todayTime = new Date(today)
          let yesterday = todayTime.setDate(todayTime.getDate() - 1)
          let beforeYesterday = todayTime.setDate(todayTime.getDate() - 1)
          let tomorrow = todayTime.setDate(todayTime.getDate() + 3)
          let afterTomorrow = todayTime.setDate(todayTime.getDate() + 1)
          todayTime.setDate(todayTime.getDate() - 2)
          if (date.getTime() === todayTime.getTime()){
            return '今天'
          }else if (date.getTime() ===  yesterday){
            return '昨天'
          }else if (date.getTime() ===  beforeYesterday){
            return '前天'
          }else if (date.getTime() ===  tomorrow){
            return '明天'
          }else if (date.getTime() ===  afterTomorrow){
            return '后天'
          }else {
            return time
          }
        }else{
          return "";
        }
      }
    }
  }
</script>

<style>

</style>

